<!--
- Author:  LiShibin.
- Date:    2017/10/19 0019.
- File:    植物列表（为植物分配养护员）.
-->
<template>
  <div class="Web_Box"
    v-infinite-scroll="loadMore"
    infinite-scroll-disabled="false"
    infinite-scroll-distance="0"
    infinite-scroll-immediate-check="false">
    <div class="dissecd">
      <select v-model="selectedChildId">
        <option value="">选择区域</option>
        <option :value="child.g_id" v-for="child in shareGardenChildList.data">{{child.garden_name}}</option>
      </select><i class="iconfont icon-moreunfold"></i></div>
    <div class="bg_fff mb10" v-for="plant in plantList.data">
      <div class="diary">
        <ul class=" f-cb">
          <li class="d_imgs"><a><img :src="$config.imgsite + $config.uploadImgSrc + plant.flower_image + '_w150'"></a>
          </li>
          <li class="pl20 w400"><a>
            <h3 class="d_tits">{{plant.flower_name}}</h3>
          </a>
          </li>
          <li>
            <i class="iconfont icon-select" @click="switchSelected(plant, false)" v-show="plant.selected"></i>
            <i class="iconfont icon-pitch2" @click="switchSelected(plant, true)" v-show="!plant.selected"></i>
          </li>
        </ul>
      </div>
    </div>
    <div class="buttonfinish"><a @click="addDistribute">确定</a></div>
    <loading-more :allLoaded="plantList.allLoaded" :show="plantList.data.length > 0"></loading-more>
    <empty-data :show="plantList.allLoaded && plantList.data.length <= 0" text="当前没有未分配的植物"></empty-data>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        gardenId: this.$route.query.garden,
        gardenMemberId: this.$route.query.gardenMember,
        selectedChildId: '',
        shareGardenChildList: {requested: false, loading: false, data: []},
        plantList: {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
      }
    },
    components: {},
    created() {
      this.getShareGardenChildrenList()
      this.getUnDistributePlantList(this.plantList.page, this.plantList.pageSize)
    },
    watch: {
      selectedChildId: function (val) {
        this.plantList = {requested: false, loading: false, allLoaded: false, page: 1, pageSize: 10, data: []}
        this.getUnDistributePlantList(this.plantList.page, this.plantList.pageSize)
      }
    },
    methods: {
      switchSelected(plant, boolValue) {
        if (plant.selected) {
          plant.selected = boolValue
        } else {
          this.$set(plant, 'selected', boolValue)
        }
      },
      getShareGardenChildrenList() {
        this.shareGardenChildList.loading = true
        this.$request.getShareGardenChildrenList(this.gardenId).then(data => {
          this.shareGardenChildList.data = [...this.shareGardenChildList.data, ...data]
        }).finally(() => {
          this.shareGardenChildList.requested = true
          this.shareGardenChildList.loading = false
        })
      },
      getUnDistributePlantList(page, pageSize) {
        this.plantList.loading = true
        let param = {sg_id: this.gardenId, g_id: this.selectedChildId, page: page, pageSize: pageSize}
        this.$request.getUnDistributePlantList(param).then(data => {
          if (data.length < this.plantList.pageSize) {
            this.plantList.allLoaded = true
          }
          this.plantList.data = [...this.plantList.data, ...data]
        }).finally(() => {
          this.plantList.requested = true
          this.plantList.loading = false
        })
      },
      loadMore() {
        if (this.plantList.loading || this.plantList.allLoaded) { // 正在加载 或 已取得全部数据
          return
        }
        setTimeout(() => {
          this.getUnDistributePlantList(++this.plantList.page, this.plantList.pageSize)
        }, 500)
      },
      addDistribute() {
        let selectedPlantList = []
        for (let i = 0; i < this.plantList.data.length; i++) {
          if (this.plantList.data[i].selected) {
            selectedPlantList.push(this.plantList.data[i].o_id)
          }
        }
        if (selectedPlantList.length <= 0) {
          this.$toast('请选择植物')
          return
        }
        this.$request.memberAddDistributePlant(this.gardenMemberId, selectedPlantList).then(data => {
          this.$toast('分配成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('分配失败:' + e.msg)
        })
      }
    }
  }
</script>

<style>

</style>